<template>
    <div>
        <el-container>
            <!-- 头部 -->
            <el-header>
                <Header></Header>
            </el-header>
            <el-container>
                <!-- 侧边栏 -->
                <el-aside width="95px">
                    <Aside></Aside>
                </el-aside>
                <!-- 主要区域 -->
                <el-container>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import Header from "@/components/Header.vue"
import Aside from "@/components/Aside.vue"
export default {
    data() {
        return {}
    },
    components: {
        Header,
        Aside
    }
}
</script>

<style lang="less" scoped>
.el-header,
/deep/.el-footer {
    background-color: #f4f4f4;
    color: #333;
    height: 49px !important;
    border-bottom: 1px solid #e5e5e5;
}

.el-aside {
    background: rgb(244, 244, 244);
    color: #333;
    text-align: center;
    height: 910px !important;
}
</style>